<template>
	<app-layout>
		<view class="app-goods" v-if="loading">
			<view>
				<app-quick-navigation></app-quick-navigation>
			</view>
			<view class="goods-banner">
				<app-goods-banner :isCart="isCart" :picList="item.pic_url" :share="item.share" sign="pintuan" :goods_id="goods_id"
				 :video-url="item.video_url"></app-goods-banner>
			</view>
			<view class="pt-time">
				<app-pt-time :day="day" :hour="hour" :minute="minute" :second="second"></app-pt-time>
			</view>
			<view class="price-title-share">
				<app-price-title-share :is_vip_card_user="is_vip_card_user" :discount='discount' :name="item.name" :level_show="item.level_show"
				 :original_price="item.original_price" :group_min_member_price="item.group_min_member_price" :group_price_min="item.group_price_min"
				 :goodsId="item.id" :url="url" :pintuan_groups="item.pintuan_groups"></app-price-title-share>
			</view>
			<view class="join-member" v-if="item.level_show === 2">
				<app-join-member :member-min-price="`${item.group_min_member_price}`" :member-max-price="`${item.group_min_member_price}`"
				 :price="`${item.original_price}`"></app-join-member>
			</view>
			<view class="vip-card">
				<app-vip-card background="#fff" top="0" v-if="is_vip"></app-vip-card>
			</view>
			<view class="merchant-guarantee" v-if="item.services.length > 0">
				<app-goods-service :list="item.services"></app-goods-service>
			</view>
			<view class="attr">
				<app-attr @attrtap="attrTap" @attr="attr" :goods="item" :attrGroupList="item.attr_groups" :selectAttr="selectAttr"
				 :show="show" ref="attr" :cartShow="cartShow">
					<view slot="extra">
						<app-pt-attr v-if="pt" :pintuan_groups="item.pintuan_groups" :selectGroupAttrId="selectGroupAttrId" @click="setGroupAttrID"></app-pt-attr>
					</view>
					<app-goods-attr @click.native="defaultRequest" slot="button" :selectAttr="selectAttr" :attr-groups="item.attr_groups"
					 :attr="item.attr">
					</app-goods-attr>
				</app-attr>
			</view>
			<view class="app-goods-marketing">
				<app-goods-marketing :express="item.express"></app-goods-marketing>
			</view>
			<view class="participant">
				<app-participant :pintuan_list="pintuan_list"></app-participant>
			</view>
			<view class="goods-detail">
				<app-goods-detail :goods="item"></app-goods-detail>
			</view>
			<view class="app-recommend">
				<app-related-suggestion-product sign="pintuan" :list="list"></app-related-suggestion-product>
			</view>
			<view>
				<app-empty-bottom :height="Number(110)"></app-empty-bottom>
			</view>
			<view class="app-buttons">
				<app-iphone-x>
					<view slot="empty-area">
						<app-button-button :level_show="item.level_show" :group_min_member_price="item.group_min_member_price"
						 :group_price_min="item.group_price_min" :pintuan_groups="item.pintuan_groups" :price="price" :price_member_min="item.price_member_min"
						 :is_alone_buy="item.pintuanGoods.is_alone_buy" :selectGroupAttrId="selectGroupAttrId" :selectAttr="selectAttr"
						 :pt="pt" :item="item" @click="shop"></app-button-button>
					</view>
				</app-iphone-x>
			</view>
		</view>
	</app-layout>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import appGoodsBanner from '../../../components/page-component/goods/app-goods-banner.vue';
	import appPtTime from '../components/app-pt-time.vue';
	import appPriceTitleShare from '../components/app-price-title-share.vue';
	import appJoinMember from '../../../components/page-component/app-join-member/app-join-member.vue';
	import appMerchantGuarantee from '../components/app-merchant-guarantee.vue';
	import appGoodsAttr from '../../../components/page-component/goods/app-goods-attr.vue';
	import appAttr from '../../../components/page-component/app-attr/app-attr.vue';
	import appButtomButton from '../components/app-buttom-button.vue';
	import appPtAttr from '../components/app-pt-attr.vue';
	import appParticipant from '../components/app-participant.vue';
	import appRelatedSuggestionProduct from '../../../components/page-component/app-related-suggestion-product/app-related-suggestion-product.vue';
	import appGoodsDetail from '../../../components/page-component/goods/app-goods-detail.vue';
	import appQuickNavigation from "../../../components/page-component/app-quick-navigation/app-quick-navigation.vue";
	import appIphonexBottom from '../../../components/page-component/app-iphonex-bottom/app-iphonex-bottom.vue';
	import appIphoneX from '../../../components/basic-component/app-iphone-x/app-iphone-x.vue';
	import appEmptyBottom from '../../../components/basic-component/app-empty-bottom/app-empty-bottom.vue';
	import appGoodsService from '../../../components/page-component/goods/app-goods-service.vue';
	import AppVipCard from '../../../components/page-component/app-vip-card/app-vip-card';
	import appGoodsMarketing from '../../../components/page-component/goods/app-goods-marketing.vue';

	export default {
		name: 'goods',
		data() {
			return {
				goods_id: 0,
				item: {
					name: '',
					pintuan_groups: [],
				},
				url: '',
				isCart: false,
				selectAttr: {},
				show: 0,
				pt: false,
				selectGroupAttrId: 0,
				pintuan_list: [],
				list: [],
				appAttr: {},
				cartShow: false,
				price: '',
				time: null,
				day: '00',
				hour: '00',
				minute: '00',
				second: '00',
				is_vip_card_user: 0,
				discount: null,
				is_vip: false,
				loading: false,
			}
		},
		computed: {
			...mapState('gConfig', {
				iphone: (data) => {
					return data.iphone;
				},
				iphoneHeight: (state) => {
					return state.iphoneHeight;
				},
			}),
			...mapState({
				mall: state => state.mallConfig.mall
			})
		},
		onLoad(options) {
			this.goods_id = options.goods_id || options.goods;
			this.$request({
				url: this.$api.goods.new_recommend
			}).then(response => {
				if (response.code === 0) {
					this.list = response.data.list;
				}	
			});
			this.$nextTick(() => {
				this.request(0).then(() => {
					this.selectGroupAttrId = this.item.pintuan_groups[0].id;
					this.endTime = this.item.pintuanGoods.end_time
					this.getTime();
				});
			})
		},
		onShareAppMessage() {
			return this.$shareAppMessage({
				path: '/plugins/pt/goods/goods',
				title: this.item.app_share_title ? this.item.app_share_title : this.item.name,
				imageUrl: this.item.app_share_pic ? this.item.app_share_pic : '',
				params: {
					goods_id: this.item.id,
				}
			});
		},
		methods: {
			attr(data) {
				this.appAttr = data;
			},
			attrTap(data) {
				if (data !== null) {
					this.selectAttr = data;
					this.price = data.price;
				} else {
					this.selectAttr = {};
				}
			},
			async request(group_id) {
				try {
					uni.showLoading({
						title: '加载中',
					});
					const response = await this.$request({
						url: this.$api.pt.detail,
						data: {
							id: this.goods_id,
							group_id: group_id,
						}
					});
					uni.hideLoading();
					if (response.code === 0) {
						this.item = response.data.detail;
						this.pintuan_list = response.data.pintuan_list;
						this.url = `${this.$api.pt.poster}&goods_id=${this.item.id}`;
						this.price = response.data.detail.price;

						if (this.item.vip_card_appoint.discount > 0) {
							this.is_vip = true;
							this.discount = this.item.vip_card_appoint.discount;
						}

						this.is_vip_card_user = this.item.vip_card_appoint.is_vip_card_user;
						this.loading = true;
					}
				} catch (e) {
					uni.hideLoading();
					throw new Error(e);
				}

			},
			shop(bool) {
				if (this.appAttr.display === 'none') {
					if (bool === false) {
						this.pt = false;
						this.request(0);
					} else {
						this.pt = true;
						this.request(this.selectGroupAttrId);
					}
					this.show = Math.random();
				} else {
					if (bool === false && this.pt === true) {
						this.pt = false;
						this.selectAttr = {};
						this.request(0);
					} else if (bool === true && this.pt === false) {
						this.pt = true;
						this.selectAttr = {};
						this.request(this.selectGroupAttrId);
					} else if (bool === false && this.pt === false) {
						this.buy();
					} else if (bool === true && this.pt === true) {
						if (Object.keys(this.selectAttr).length === 0) {
							uni.showToast({
								title: '请选择规格',
								icon: 'none'
							});
						} else {
							let mch_id = this.item.mch_id;
							let mch_list = [];
							let goods = {
								id: this.item.id,
								attr: [],
								num: this.appAttr.number,
								goods_attr_id: this.selectAttr.id,
								cart_id: 0,
							};
							for (let i = 0; i < this.selectAttr.attr_list.length; i++) {
								let attr = {
									attr_id: this.selectAttr.attr_list[i].attr_id,
									attr_group_id: this.selectAttr.attr_list[i].attr_group_id,
								};
								goods.attr.push(attr);
							}
							mch_list.push({
								mch_id: mch_id,
								pintuan_order_id: 0,
								pintuan_group_id: this.selectGroupAttrId,
								goods_list: [goods],
							});
							this.$jump({
								open_type: 'navigate',
								url: `/pages/order-submit/order-submit?mch_list=${JSON.stringify(mch_list)}&preview_url=${encodeURIComponent(this.$api.pt.order_preview)}&submit_url=${encodeURIComponent(this.$api.pt.order_submit)}&order_page_url=/plugins/pt/order/order&plugin=pt`
							});
						}
					}
				}
			},
			setGroupAttrID(id) {
				this.selectGroupAttrId = id;
				this.selectAttr = {};
				this.request(id);
			},
			defaultRequest() {
				this.pt = true;
				this.request(this.selectGroupAttrId);
			},
			buy() {
				if (!this.submit()) {
					return false;
				}
				if (Object.keys(this.selectAttr).length === 0) {
					uni.showToast({
						title: '请选择规格',
						icon: 'none'
					});
					return;
				}
				let goods = this.item;
				let number = this.appAttr.number;
				let select_attr = this.selectAttr;
				let goods_attr_id = select_attr.id;
				let attr = [];
				for (let i in select_attr.attr_list) {
					attr.push({
						attr_id: select_attr.attr_list[i].attr_id,
						attr_group_id: select_attr.attr_list[i].attr_group_id,
					});
				}
				let mch_list = [];
				let mch = {
					mch_id: goods.mch_id ? goods.mch_id : 0,
					goods_list: []
				};
				mch.goods_list.push({
					id: goods.id,
					attr: attr,
					num: number,
					cat_id: 0,
					goods_attr_id: goods_attr_id
				});
				mch_list.push(mch);
				uni.navigateTo({
					url: '/pages/order-submit/order-submit?mch_list=' + JSON.stringify(mch_list),
				})
			},
			submit() {
				let goods = this.item;
				let number = this.appAttr.number;
				let select_attr = this.selectAttr;
				if (!select_attr) {
					uni.showModal({
						title: '提示',
						content: '请先选择规格',
						showCancel: false
					});
					return false;
				}
				if (number <= 0) {
					uni.showModal({
						title: '提示',
						content: '商品数量不能为0',
						showCancel: false
					});
					return false;
				}
				if (!goods) {
					return false;
				}
				return true;
			},
			getTime: function() {
				var data = this.endTime
				let oldTime = new Date(data.replace(/-/g, '/'));
				this.formatTime(oldTime)
				this.time = setInterval(() => {
					this.formatTime(oldTime)
				}, 1000);	
			},
			formatTime(oldTime) {
				let nowTime = new Date();
				let time = oldTime.getTime() - nowTime.getTime();
				let day = parseInt((time / 3600000 / 24));
				let hour = parseInt((time / 1000 / 60 / 60) % 24);
				let minute = parseInt((time / 1000 / 60) % 60);
				let second = parseInt((time / 1000) % 60);
				this.day = day < 10 ? `0${day}` : day;
				this.hour = hour < 10 ? `0${hour}` : hour;
				this.minute = minute < 10 ? `0${minute}` : minute;
				this.second = second < 10 ? `0${second}` : second;
			}
		},
		components: {
			'app-goods-banner': appGoodsBanner,
			'app-pt-time': appPtTime,
			'app-price-title-share': appPriceTitleShare,
			'app-join-member': appJoinMember,
			'app-merchant-guarantee': appMerchantGuarantee,
			'app-goods-attr': appGoodsAttr,
			'app-attr': appAttr,
			'app-button-button': appButtomButton,
			'app-pt-attr': appPtAttr,
			'app-participant': appParticipant,
			'app-related-suggestion-product': appRelatedSuggestionProduct,
			'app-goods-detail': appGoodsDetail,
			'app-quick-navigation': appQuickNavigation,
			'app-iphone-bottom': appIphonexBottom,
			'app-iphone-x': appIphoneX,
			'app-empty-bottom': appEmptyBottom,
			'app-goods-service': appGoodsService,
			'app-vip-card': AppVipCard,
			'app-goods-marketing': appGoodsMarketing,
		},
		onShow() {
			if (this.endTime) {
				this.getTime()
			}
		},
		onHide() {
			clearInterval(this.time);
		},
		onUnload() {
			clearInterval(this.time);
		}
	}
</script>

<style lang="scss" scoped>
	.vip-card {
		padding: 0 #{20rpx} #{20rpx};
		background-color: #fff;
	}

	.merchant-guarantee {
		margin-top: #{20rpx};
	}

	.attr {
		margin: #{20rpx} 0;
	}

	.app-goods {
		box-sizing: border-box;
		padding-bottom: #{110rpx};
	}

	.goods-detail {
		margin-top: #{24rpx};
	}

	.join-member {
		background-color: #ffffff;
		padding: 0 #{24rpx};
		box-sizing: border-box;
	}

	.app-buttons {
		position: relative;
		z-index: 1602;
	}
</style>
